<!--  -->
<template>
  <div class>
  
    <!-- <img src="../../assets/img/banner.png" alt class="bannger" /> -->
    <Carousel
          v-model="value1"
          loop
          class="my-swipe"
          :autoplay="setting.autoplay"
          :autoplay-speed="setting.autoplaySpeed"
          :dots="setting.dots"
          :radius-dot="setting.radiusDot"
          :trigger="setting.trigger"
          :arrow="setting.arrow"
        >
          <CarouselItem v-for="(item,index) in dataImg" :key="index">
            <img :src="item.bannerUrl" alt class="my-swipe-img" />
          </CarouselItem>
        </Carousel>
    <titlemeta></titlemeta>
    <div class="title">
      <div v-for="(item,index) in queryData" :key="index" class="title_serve" @click="goServer(item)" :class="{'click':item.id == title.type}">{{item.typeName}}</div>
    </div>

    <div class="serverCont">
      <div v-for="(item,index) in projectList" :key="index" class="serverCont_list" @click="goContentInfo(item)">
        <img :src="item.serviceUrl" alt class="serverCont_list_img" />
        <div class="serverCont_list_title">{{item.serviceName}}</div>
        <div class="serverCont_list_content">{{item.serviceDescribe}}</div>
      </div>

      <div v-if='!display' class="noData">
             暂无数据
      </div>
    </div>
  
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Head from "../../components/Head";
import Foot from "../../components/Foot";
import lefINvitation from "../../components/lefINvitation";
import nightNvitation from "../../components/nightNvitation";
import {
  serviceTypeAll,
  searchService,
  infoFind,
  bannerList,
  serviceType,twosearchService
} from "../../api/info";
import titlemeta from "../../components/titlemeta";
import { clieentWidth } from "../../utils/clientwidth";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Head,
    Foot,
    lefINvitation,
    nightNvitation,
    titlemeta
  },
  data() {
    //这里存放数据
    return {
      queryData: [],
      mobliePc: false,
      display: true,
      total: 0,
      title: {
          key:'',
          type:'',
      },
      value1: 0,
      setting: {
        autoplay: true,
        autoplaySpeed: 2000,
        dots: "inside",
        radiusDot: false,
        trigger: "click",
        arrow: "hover"
      },
      // 轮播数据
      dataImg: [],
      list: [],
      projectList: [
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    $route(to, from) {
      this.$router.go(0);
    }
  },
  //方法集合
  methods: {
    // banner get
    getbannerList(appType) {
      bannerList(appType).then(res => {
        this.dataImg = res.data;
      });
    },
    // 列表分类
    getserviceTypeAll() {
      infoFind().then(res => {
        this.projectList= res.data;

      });
    },
    // 分页
    changeVal(val) {
      this.title.currentPage = val;
      this.getsearchService();
    },
    // 获取项目列表
    getsearchService() {
      this.projectList= []
      twosearchService(this.title).then(res => {
        if (res.code == "0000") {
          this.projectList = res.data;
          this.total = res.data.totalCount;
          this.display = true;
        } else {
          this.display = false;
        }
      });
    },
    getQuery() {
      this.title.params.serviceId = this.$route.query.type;
      this.getserviceTypeAll();
      this.getsearchService();
    },
    changeContent(item) {
      this.$router.push({ path: "/contentInfo", query: { id: item.id } });
    },
    goPro(item) {
      this.$router.push({ path: "/project", query: { type: item.id } });
    },
    // 回到顶部
    buttop(val) {
      if (val) {
        document.documentElement.scrollTop = 0;
      }
    },
    ismobliePc() {
      if (clieentWidth()) {
        this.mobliePc = true;
      } else {
        this.mobliePc = false;
      }
    },

    ///////////////////////////////////////////////////////////////////////////
    serviceTypeData() {
      serviceType().then(res => {
        this.queryData = res.data;
      });
    },
    goServer(item){
          this.title.type = item.id
          this.getsearchService()
    },
    // 详情
    goContentInfo(item){
      
         this.$router.push({ path: "/contentInfo", query: { id: item.id,parentId:item.parentId } });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if( this.$route.query.type != undefined){
       this.title.type = this.$route.query.type;
    }else{
      this.getserviceTypeAll()
    }
    this.getbannerList(12);
    this.getsearchService();
    this.serviceTypeData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import url("../../assets/nvit.scss");
.my-swipe {
  height: 4.23rem;
  color: #fff;
  font-size: 0.3rem;
  text-align: center;
}
.my-swipe-img {
  width: 100%;
  height: 4.6rem;
}
.bannger {
  width: 100%;
}
.title {
  width: 67%;
  margin: 0.3rem auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title_serve {
  cursor: pointer;
  font-family: "微软雅黑";
  font-weight: 400;
  font-style: normal;
  font-size: 0.16rem;
  padding: 0.07rem 0.3rem;
}
.title_serve:hover {
  color: rgba(7, 103, 242, 1);
}
.serverCont {
  width: 67%;
  margin: auto;
  display: flex;
  justify-items: center;
  align-items: center;
  flex-wrap: wrap;
}
.serverCont_list {
  width: 30%;
  padding: 0.3rem;
  box-shadow: 5px 5px 13px rgba(215, 215, 215, 0.349019607843137);
  border-radius:10px ;
  margin: 0.2rem;
  cursor: pointer;
}
.serverCont_list_img {
  width: 100%;
  height: 2rem;
}
.serverCont_list_img:hover {
  transform: scale(1.03);
  transition: all 0.5s;
}

.serverCont_list_title,.serverCont_list_content {
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-weight: 700;
  font-style: normal;
  font-size: 0.16rem;
  padding: 0.1rem 0;
}
.serverCont_list_content{
      font-size: 0.14rem;
    color: #AEAEAE;
    font-weight: 400;
}
.noData{
  padding: 2rem 0;
  text-align: center;
  margin: auto;
}

.click{
   
    border-radius:20px ;
    background-color: rgba(7, 105, 242, 0.563);
    cursor: pointer;
    color: white;
}


@media screen and (max-width: 780px) {
  .my-swipe-img,
  .section,
  .my-swipe {
    height: 1.5rem;
  }
  .bannger{
    height: 1.1rem;
  }
  .title{
    width: 90%;
    flex-wrap: wrap;
  }
  .title_serve{
    margin: 0.1rem;
  }
  .serverCont{
    width: 90%;
    flex-wrap: wrap;
  }
  .serverCont_list{
    width: 90%;
  }
}
</style>